<template>
	<!-- 商品购买 加入购物车 -->
	<div class="commd_popup">
		<div class="commd_inif">
			<div class="seckill_list">
			    <div class="s_list_img">
			        <img :src="commodityData.image_url" alt="">
			    </div>
				<div class="s_list_init" v-for="item in commodityData.repository" :key="item.id">
					<div class="s_price_box">
						<div class="s_price">￥{{source?item.price:item.price*2}}</div>
						<div class="s_text">{{source?'拼团价':'单独购买'}}</div>
					</div>
				    <div class="s_list_title van-ellipsis">
				        {{commodityData.product_name}}
				    </div>
				    <div class="s_residue">
				       已拼:{{item.count}}件
				    </div>
				</div>
			</div>
			<!-- 规格 -->
			<div class="commd_spec">
				<div class="commd_spec_text">规格:</div>
				<span class="commd_spec_val" v-for="item in commodityData.repository" :key="item.id">
				{{item.product_detail_group_name}}
				</span>
			</div>
			<!-- 数量 -->
			<div class="commd_count">
				<div class="commd_count_text">
					数量:
				</div>
				<div class="commd_count_stepper">
					<van-stepper v-model="countValue" min="1" max="99" />
				</div>
			</div>
		</div>	
		<div class="commd_button">
			<van-button :color="source?'#FF1B28':'#FC285D'" size="large" @click='commdPurchase'>
				<span v-for="item in commodityData.repository" :key="item.id">
					￥{{source?item.price:item.price*2}}
				</span>
				<br/>
				<span>{{source?'一键开团':'单独购买'}}</span>
			</van-button>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				countValue:1,//商品数量
			}
		},
		props:['commodityData',"source"],
		mounted(){
			console.log(this.commodityData);
		},
		methods:{
			//商品购买
			commdPurchase(){
				let commodityData = this.commodityData;
				let query = {
					id:this.$route.query.id,//商品id
					repository_id:commodityData.repository[0].id,//该规格的id
					shop_name:commodityData.shop.name,
					shop_id:commodityData.shop.id,
					count:this.countValue,
					specification:commodityData.repository[0].product_detail_group_name,
					price:commodityData.repository[0].price,
					img:commodityData.image_url,
					comd_name:commodityData.repository[0].product_name,
				}
				if(this.source){
					  //显示模态框
					    var token = this.$cookies.get("token")||localStorage.getItem('token');
					    console.log(token);
					  //   if(token==null){
					  //     //跳转登陆页面 用户登录后获取
					  //     localStorage.setItem('beforeLoginUrl',"ProductDetails?id="+this.$route.query.id+"&type="+this.type+"&user_id="+user_id+"&from="+urlFrom+"&isappinstalled="+urlIsappinstalled);
					  //     this.$router.push({path:'/login'})
					  //     return;
					  //   }
					  
					query.price=commodityData.repository[0].price;
				}else{
					query.price=commodityData.repository[0].price*2;
				}
				this.$router.push({path:'/orderForm',query:query})
			},
			
		},
	}
</script>

<style lang="scss" scoped>
	// 弹窗详细
	.commd_inif{
		padding:10px 10px 0 10px;
		margin-bottom: 50px;
	}
	.seckill_list{
	    width: 100%;
	    background-color: white;
	    color:rgb(236,53,35);
	    display: flex;
	    box-sizing: border-box;
		border-bottom: 1px solid #ccc;
	    position: relative;
		.s_list_img{
			width: 100px;
			height: 100px;
			margin-bottom: 10px;
		    box-sizing: border-box;
		}
		.s_list_img img{
		    width: 100%;
			height: 100%;
		}
		.s_list_init{
			width: 75%;
			margin-top: 10px;
			padding-left:6px;
			.s_price_box{
				display: flex;
				.s_price{
					font-size: 20px;
					margin-right: 5px;
				}
				.s_text{
					font-size: 12px;
					background-color: #FF1B28;
					color: white;
					line-height: 17px;
					height: 15px;
					padding: 1px 2px;
					border-radius: 4px;
					margin-top: 5px;
				}
			}
			.s_residue{
				color: #6F6F6F;
				text-align: left;
				font-size: 13px;
				padding-left: 5px;
			}
			/* 文字 */
			.s_list_title{
			    color: #323233;
			    font-size: 15px;
			    line-height: 26px;
				padding-left: 5px;
			}
		}
	}
	// 规格
	.commd_spec{
		width: 100%;
		color: #282828;
		text-align: left;
		.commd_spec_text{
			font-size: 14px;
			line-height: 35px;
			color: #343434;
		}
		.commd_spec_val{
			color: red;
			border: 1px solid red;
			padding: 2px 5px;
			border-radius: 4px;
			font-size: 12px;
		}
	}
	//数量
	.commd_count{
		display: flex;
		justify-content: space-between;
		margin: 30px 0 10px 0;
		.commd_count_text{
			font-size: 14px;
			color: #343434;
		}
	}
	
	//购买
	.commd_popup{
		width: 100%;
		height: 100%;
		position: relative;
		.commd_button{
			width: 100%;
			position:fixed;
			bottom:1px;
		}
		.van-button__text{
			// display: flex;
			// justify-content: center;
			// flex-wrap: wrap;
			line-height: 12px;
		}
		.van-button{
			line-height: 0;
		}
		.van-button__text>span:nth-child(1){
			font-weight:bold;
			font-size: 19px;
			display: inline-block;
			// margin-top: 8px;
			line-height: 24px;
		}
		.van-button__text>span:nth-child(3){
			font-size: 12px;
			line-height: 0;
			display: inline-block;
		}
	}
	
</style>
